<template>
  <view class="container">
    <custom-nav title="通知状态"></custom-nav>
    <view class="content">
      <view class="n-one" :class="gzhStatus ? 'n-active' : ''">
        <view class="n-top">
          <image src="@/static/my/notice.svg" mode="scaleToFill" class="n-icon" />
          <view class="n-status">{{gzhStatus ? '已开启' : '未开启'}}</view>
        </view>
        <view class="n-title">
          为了帮孩子尽快脱单 <br> 请及时开启通知
        </view>
        <view class="n-text">每日嘉宾 <br> 来访、解锁、收藏等提醒</view>
        <view class="n-btn" @click="openFn"><custom-btn>去开启</custom-btn></view>
      </view>
      <view class="n-serve">
        <text class="n-text" @click="toServe">点击联系客服</text>
      </view>
    </view>
  </view>
</template>

<script setup>
// 引入api
import { urlConf } from "@/config/resource";
import useStore from "@/store";
const { app, common } = useStore();

// 公众号关注状态
const gzhStatus = computed(() => app.gzhStatus);

const toServe = () => {
  common.updatePopupOpen(true, "serve");
};

// 跳转公众号
const openFn = () => {
  if (gzhStatus.value) return;
  uni.navigateTo({ url: "/subPages/gzhpage/index" });
};
</script>

<style lang=scss scoped>
.n-one,
.n-two {
  margin: 20rpx;
  padding: 60rpx;
  border-radius: 30rpx;
  .n-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .n-icon {
    width: 100rpx;
    height: 100rpx;
  }
  .n-status {
    padding: 10rpx 26rpx;
    background: #fff919;
    font-weight: bold;
    font-size: 36rpx;
    color: #ba4512;
    border-radius: 10rpx;
  }
  .n-title {
    font-weight: 500;
    font-size: 48rpx;
    color: #fff;
    padding: 60rpx 0 20rpx;
    letter-spacing: 1rpx;
  }
  .n-text {
    font-weight: 500;
    font-size: 32rpx;
    color: #fff;
    letter-spacing: 1rpx;
  }

  .n-btn {
    margin: 60rpx auto 0;
    width: 590rpx;
    height: 100rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #ff7032;
    line-height: 100rpx;
    background: #fff;
    border-radius: 60rpx;
  }
}

.n-one {
  background: linear-gradient(90deg, #ff7032 0%, #ff7032 100%);
  .n-top {
    margin-top: -20rpx;
  }
}
.n-two {
  background: #dc9865;
  .n-btn {
    background: transparent;
    border: 2rpx solid #fff;
    color: #fff;
  }
}

.n-active {
  .n-status {
    background: rgba(255, 255, 255, 0.5);
  }
  .n-btn {
    opacity: 0.3;
  }
}

.n-serve {
  font-weight: bold;
  font-size: 32rpx;
  color: #d77c45;
  text-align: center;
  padding-top: 120rpx;
}
.n-text {
  text-decoration-line: underline;
}
</style>